<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="填写商品信息">
      </el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>
    <div v-if="active == 0">
      <el-form ref="form" :model="form" label-width="80px">
        <div style="margin-left:15px">
          <span>商品分类</span>
          <el-cascader v-model="value" :options="option" />

        </div>
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="form.region"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-input v-model="form.date1"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>

        <el-form-item label="商品售价">
          <el-input v-model="form.date2"></el-input>
        </el-form-item>
        <el-form-item label="市场价">
          <el-input v-model="form.delivery"></el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input v-model="form.type"></el-input>
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="next" style="height:30px">下一步填写信息</el-button>

    </div>
    <div v-if="active == 1">
      <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入专题名称" v-model="value" :data="data">
      </el-transfer>
      <el-button type="primary" @click="next" style="height:30px">上一步填写信息</el-button>
      <el-button type="primary" @click="stepChange()" style="height:30px">完成填写信息</el-button>
      <!-- <el-button type="primary" @click="upData()" style="height:30px">修改原有数据</el-button> -->


    </div>

  </div>
</template>
<script>
export default {
  name: 'productAdd',
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['华为', '荣耀', '没救', '了！', '草', '草'];
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      active: 0,
     

      form: {
        name: '',//商品名称
        value: '',//商品分类
        region: '',
        date1: '',//商品品牌
        date2: '',//商品售价
        delivery: '',//市场价
        type: '',//商品库存
        resource: '',
        desc: ''
      },
      data: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      //商品分类
      option: [
        {
          value: '服装',
          label: '服装',
          children: [
            {
              value: '上衣',
              label: '上衣'
            },

          ],

        }, {
          value: '数码',
          label: '数码',
          children: [
            {
              value: '手机',
              label: '手机'
            }, {
              value: '笔记本电脑',
              label: '笔记本电脑'
            },

          ]
        }
      ],
    };
  },

  methods: {
    next() {
      if (this.active++ > 2)
        this.active = 0;
    },
    //添加
    stepChange() {
      this.$axios.post('/product/add', {
        proDuctName: this.form.name,//商品名称
        product: this.form.date2,//商品售价
        kuCun: this.form.type//商品库存
      })
        .then((res) => {
          console.log(res);
        }).catch(err => {
          console.log(err, 'err')
        });
    },
    //修改
    upData(){
      this.$axios.post('/product/update', {
        proDuctName: this.form.name,//商品名称
     
      })
        .then((res) => {
          console.log(res);
        }).catch(err => {
          console.log(err, 'err')
        });
    }
  }

}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.el-form {
  .el-form-item {
    margin: 5px;
  }
}
</style>